<!-- 出库订单详情 -->
<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc :model="baseModel" :data="form" size="default" direction="vertical" :attrs="$defaultDetailDescAttrs" border
      labelClassName="flex_cell" contentClassName="flex_cell">
    </ex_super_desc>

    <template v-if="form.productType !== 'EXPRESS'">
      <ex_header_spiler :title="$t('label_tms_waybill_product_detail')" />
      <ex_super_table :model="RelationModel" :data="form.tmsOrderSkuDetailDTOList">
      </ex_super_table>

      <!--    <ex_header_spiler :title="$tt('label_transport_detail')" />-->

      <ex_header_spiler :title="$t('label_transport_detail')" />
      <ex_super_table :model="transportModel" :data="form.tmsTaskInfoDTOList">
      </ex_super_table>
    </template>
    <ex_header_spiler :title="$tt('label_value_add_service')" />
    <ex_super_desc :model="serviceModel" :data="form" size="default" direction="vertical" :attrs="$defaultDetailDescAttrs" border
      labelClassName="flex_cell" contentClassName="flex_cell">
    </ex_super_desc>

    <ex_header_spiler :title="$t('label_Waybill_list')" />
    <template v-if="form.productType === 'EXPRESS'">
      <div v-for="(item, index) in stepsData" :key="index" class="stepsBox">
        <div class="stepsDes">
          <div>{{ $t('label_order_or_waybill_number') }}:
            <text_extra_tooltip_operate style="display: inline-block;" :data_id="index" :value="item.trackNumber"
              data_type="boxNo" :extra_barcode_image="true" extra_text_align='center' />
          </div>
          <div>{{ $t('label_volume') }}:{{ item.totalVolume }}（m³）</div>
          <div>{{ $t('label_weight') }}:{{ item.totalWeight }}（kg）</div>
        </div>
        <el-steps :active="item.active || 0" class="useSteps" finish-status="success">
          <el-step v-for="(st, s) in item.data" :key="s" :title="st.originPlaceName">
            <div slot="description" class="description" v-if="s < item.data.length - 1">
              <p>{{ $t('TmsWaybillStatusEnum__' + st.status) }}</p>
              <!-- 显示 transportNumber -->
              <text_extra_tooltip_operate v-if="st.transportNumber !== item.trackNumber" class="transportNumber"
                :value="st.transportNumber" data_type="boxNo" :extra_barcode_image="true" extra_text_align='center' />
            </div>
          </el-step>
        </el-steps>
      </div>
    </template>

    <ex_super_table v-else :model="waybillModel" :data="form.tmsWaybillInfoDTOList"></ex_super_table>




    <ex_header_spiler :title="$t('label_operate_log')" />
    <ex_super_table :model="operateLogModel" :data="operateLog">
    </ex_super_table>
  </div>
</template>
<script>
import router_params from '@/mixin/router_params';

let defaultObj = {
  // id: null,//long
  trackNumber: null,//	string 	任务编号（唯一）==跟踪号
  customerName: null,//string 	客户名称
  taskType: null,//TrackTaskTypeEnum 	任务类型（入库订单: RECIPT_ORDER 入库订单, LSSUE_ORDER 出库订单, RETURN_ORDER 退货订单, HEAD_TRANSPORT 头程运输
  deliveryAddress: null,//	string 	发货点地址
  receiptAddress: null,//string 	收货点地址
  orderCode: null,//string 	关联订单号
  shipperContacts: null,//	string 	发货人联系方式
  receiptUserName: null,//	string 	收货人名称
  receiptContacts: null,//	string 	收货人联系方式
  logisticsProductsType: null,//LogisticsProductsTypeEnum 	物流产品类型（海运、空运、铁运、陆运、国际快递）: SEA_TRANSPORT 海运, SKY_TRANSPORT 空运, LORRY_NAVIGATE 陆运, IRON_TRANSPORT 铁运
  logisticsProductsName: null,//	string 	物流产品名称
  generateTaskCount: null,//	integer 	生成运输任务数
  businessMode: null,//string 	业务方式（门到门）
  gmtCreate: null,//long 	创建时间
  gmtModify: null,//	long 	更新时间
  creator: null,//string 	创建人
  modifier: null,//	string 	更新人
  shipperUserName: null,//	string 	发货人名称
  requireCompleteTime: null,//	long 	要求完成时间
  status: null,//	TmsOrderStatusEnum 	任务单状态（待执行: WAIT_EXECUTE 待执行, WAIT_LOAD 待配载, WAIT_LSSUED 待下发, WAIT_TAKING 待接单, WAIT_LEAVE 待发车, TRANSIT 运输中, FINISH 已完成
  operationName: null,//	string 	运输方案名称
  loadingUnloading: null,//	YesOrNoEnum 	是否使用装卸服务（N: Y 是, N 否
  isReceipt: null,//	YesOrNoEnum 	是否使用签收服务（N: Y 是, N 否
  collectingPrice: null,//	bigdecimal 	代收金额
  insurePrice: null,//	bigdecimal 	投保金额
  isDeclareUpload: null,//	YesOrNoEnum 	报关资料是否上传（N: Y 是, N 否
  isSuitcase: null,//	YesOrNoEnum 	提箱/还箱（N: Y 是, N 否
  specialRequest: null,//	string 	特殊要求
  tmsWaybillInfoDTOList: []
}
export default {
  title: "label_tms_waybill_order_view",
  mixins: [router_params],
  components: {},
  data() {
    return {
      loading: false,
      form: {},
      baseModel: [
        { key: 'trackNumber', label: 'label_tms_track_task_number', },
        { key: 'customerName', label: 'label_customer_name', },
        { key: 'taskType', label: 'label_tms_track_task_type', formatter: (r, c, v) => this.$enumShow(v, 'TrackTaskTypeEnum') },
        { key: 'deliveryAddress', label: 'label_tms_track_delivery_point_addr', },
        { key: 'receiptAddress', label: 'label_tms_track_receiving_addr', },
        { key: 'refOrderCode', label: 'label_tms_track_relevance_order_no', },
        { key: 'deliveryContacts', label: 'label_tms_track_consigner_phone', },
        { key: 'receiptUserName', label: 'label_tms_receipt_consignee_name', },
        { key: 'receiptContacts', label: 'label_tms_track_consignee_phone', },
        { key: 'transportType', label: 'label_tms_waybill_transport_mode', formatter: (r, c, v) => this.$enumShow(v, 'LogisticsProductsTypeEnum') },
        { key: 'productName', label: 'label_tms_track_logistics_product_name', },
        { key: 'generateTaskCount', label: 'label_tms_track_gen_task_count', },
        { key: 'businessMode', label: 'label_tms_track_buss_type', },
        { key: 'deliveryUserName', label: 'label_tms_waybill_consigner_name', },
        { key: 'requireCompleteTime', label: 'label_tms_track_completion_time', formatter: (r, c, v) => this.$dateFormat(v) },
        { key: 'status', label: 'label_task_order_status', formatter: (r, c, v) => this.$enumShow(v, 'TmsOrderStatusEnum') },
        { key: 'operationName', label: 'label_tms_track_transport_name', },
        {
          key: 'signUrl', label: 'label_sign_img', render: (h, { data }) => {
            if (data.signUrl) {
              return h('ex_image_view', {
                style: { width: '100px', height: '100px' },
                class: 'border_normal mg_1',
                props: { lazy: true, fit: 'fill', src: data.signUrl, 'preview-src-list': [data.signUrl] }
              })
            }
          }
        },
      ],
      RelationModel: [
        { key: 'skuBarcode', label: 'label_sku_code', },
        { key: 'skuName', label: 'label_sku_name', },
        { key: 'boxNo', label: 'label_box_code', },
        { key: 'skuUnit', label: 'label_tms_waybill_unit', },
        { key: 'skuPrice', label: 'label_tms_waybill_unit_cost', },
        { key: 'skuDeclaredValue', label: 'label_money', },
        { key: 'quantity', label: 'label_tms_track_pkgs', },
        { key: 'volume', label: 'label_tms_track_volume', },
        { key: 'weight', label: 'label_tms_track_weight', },
      ],
      transportModel: [
        { label: 'label_tms_task_number', key: 'waybillTaskCode' },
        { label: 'label_tms_line_transport_section_type', key: 'transportSection', formatter: (r, c, v, i) => this.$enumShow(v, "TransportSectionEnum") },
        { label: 'label_plan_box_number', key: 'totalBox' },
        { label: 'label_plan_quantity', key: 'totalQuantity' },
        { label: 'label_plan_volume', key: 'totalVolume' },
        { label: 'label_plan_weight', key: 'totalWeight' },
        { label: 'label_status', key: 'status', formatter: (r, c, v) => this.$enumShow(v, 'TmsWaybillStatusEnum') },
        { label: 'label_srm_supplier_name', key: 'carrierName' },
        { label: 'label_tms_waybill_original_place', key: 'originAddress' },
        { label: 'label_tms_receipt_destination', key: 'destinationAddress' },
        { label: 'label_car_number', key: 'vehicleNo' },
        { label: 'label_tms_driver_driver_name', key: 'driverName' },
        { label: 'label_tms_waybill_transport_mode', key: 'transportModel', formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum") },
        { label: 'label_actual_box', key: 'practicalTotalBox' },
        { label: 'label_actual_quantity', key: 'practicalTotalQuantity' },
        { label: 'label_actual_volume', key: 'practicalTotalVolume' },
        { label: 'label_actual_weight', key: 'practicalTotalWeight' },
        { label: 'label_is_abnormal', key: 'isAnomaly', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },
      ],
      serviceModel: [
        { key: 'loadingUnloading', label: 'label_tms_track_handling_service', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//是否使用装卸服务
        { key: 'isReceipt', label: 'label_tms_track_signing_service', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//是否使用签收服务
        { key: 'isBehalfMoney', label: 'label_tms_collected_services', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//是否使用代收服务
        { key: 'collectingPrice', label: 'label_tms_track_amount_collected', },//代收金额
        { key: 'isInsurance', label: 'label_tms_insured_services', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//是否使用投保服务
        { key: 'insuranceValue', label: 'label_tms_track_insured_amount', },//投保金额
        { key: 'isDeclareUpload', label: 'label_tms_track_customs_doc_upload', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//报关资料是否上传
        { key: 'isSuitcase', label: 'label_tms_track_suitcase', formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum") },//是否提箱/还箱
        { key: 'specialRequest', label: 'label_tms_track_special', },//特殊要求
      ],
      waybillModel: [
        // { key: 'waybillCode', label: 'label_tms_waybill_waybill_number', 'min-width': 180, 'show-overflow-tooltip': true, },
        // { key: 'refOrderCode', label: 'label_tms_receipt_order_platform_number', 'min-width': 180, 'show-overflow-tooltip': true, },
        { key: 'waybillCode', label: 'label_order_or_waybill_number', 'min-width': 160, 'show-overflow-tooltip': true, },
        { key: 'originPlaceName', label: 'label_start_place_name' },
        { key: 'destinationPlaceName', label: 'label_end_place_name' },
        {
          key: 'transportSection', label: 'label_tms_waybill_waybill_type', 'min-width': 100, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, "TransportSectionEnum")
        },
        {
          key: 'transportType', label: 'label_tms_waybill_transport_mode', 'min-width': 80, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum")
        },
        {
          key: 'status', label: 'label_status', 'width': 80, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, "TmsWaybillStatusEnum")
        },

        // {
        //   key: 'wmsOrderStatusEnum', label: 'label_tms_waybill_wms_order_status', 'width': 100, 'show-overflow-tooltip': true,
        //   if: () => this.tmsWaybillCategory != "DELIVERY_WAYBILL",
        //   formatter: (r, c, v, i) => this.$enumShow(v, "WmsOrderStatusEnum")
        // },

        { key: 'esCarrierName', label: 'label_tms_waybill_carrier_name', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'customerName', label: 'label_customer_name', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'receiptUserName', label: 'label_tms_receipt_consignee_name', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'receiptContacts', label: 'label_tms_track_consignee_phone', 'width': 100, 'show-overflow-tooltip': true, },
        {
          key: 'startAddress', label: 'label_tms_waybill_original_place', 'width': 100, 'show-overflow-tooltip': true,
          render: (h, { row }) => {
            return `${row.originProvinceName || ''}${row.originCityName || ''}${row.originAreaName || ''}${row.originAddress || ''}`
          }
        },
        {
          key: 'endAddress', label: 'label_tms_receipt_destination', 'width': 100, 'show-overflow-tooltip': true,
          render: (h, { row }) => {
            return `${row.destinationProvinceName || ''}${row.destinationCityName || ''}${row.destinationAreaName || ''}${row.destinationAddress || ''}`
          }
        },
        { key: 'totalBox', label: 'label_tms_waybill_total_cartons', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'totalQuantity', label: 'label_tms_waybill_total_unit_quantity', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'totalWeight', label: 'label_total_weight', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'totalVolume', label: 'label_tms_waybill_total_volume', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'isBreakUp', label: 'label_tms_waybill_already_split', 'width': 100, formatter: (r, c, v) => this.$enumShow(v, 'YesOrNoEnum') },
        {
          key: 'esArrivalTime', label: 'label_expected_arrival_date', 'width': 100, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$dateFormat(v)
        },],
      operateLogModel: [
        { key: 'trackNumber', label: 'label_order_or_waybill_number', 'min-width': 160, },
        { key: 'placeName', label: 'label_operate_network', },
        // { key: 'orderId', label: 'label_order_id', },
        // { key: 'waybillId', label: 'label_waybill_id', },
        // { key: 'waybillNo', label: 'label_waybill_code', },
        // { key: 'taskId', label: 'label_task_id', },
        { key: 'operateType', label: 'label_operate_type', formatter: (r, c, v) => this.$enumShow(v, 'TmsOrderOperateTypeEnum') },
        // { key: 'operateUserId', label: 'label_operate_user_id', },
        { key: 'operateUserName', label: 'label_operate_user', },
        { key: 'operateTime', label: 'label_operate_time', formatter: (r, c, v) => this.$dateFormat(v) },
        { key: 'volume', label: 'label_volume', },
        { key: 'weight', label: 'label_weight', },
        { key: 'packageNo', label: 'label_bag', },
        { key: 'remark', label: 'label_remark', },
      ],
      operateLog: [],
      stepsData: [],
    };
  },

  computed: {

  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.$emit("tagModifyLabel", { _key: 'label_name_code', name: this.$tt('label_tms_waybill_order_view'), code: into_params.trackNumber })
        this.loading = true
        this.$ajax({
          url: "/tms-api/task/TmsOrderInfoRpc/detail.json",
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            this.loading = false
            this.form = Object.assign({}, res.data)

            // 数据分组 相同trackNumber为同一进度数据
            this.stepsData = []
            const tmsWaybillInfoDTOList = res.data.tmsWaybillInfoDTOList
            var map = {}
            for (let i = 0; i < tmsWaybillInfoDTOList.length; i++) {
              let ai = {
                trackNumber: tmsWaybillInfoDTOList[i].trackNumber,
                originPlaceName: tmsWaybillInfoDTOList[i].originPlaceName,
                destinationPlaceName: tmsWaybillInfoDTOList[i].destinationPlaceName,
                totalVolume: tmsWaybillInfoDTOList[i].totalVolume,
                totalWeight: tmsWaybillInfoDTOList[i].totalWeight,
                status: tmsWaybillInfoDTOList[i].status,
                transportNumber: tmsWaybillInfoDTOList[i].transportNumber
              };
              // 判断map中是否有 trackNumber 没有就用trackNumber做key增加一条 同时数组直接push
              // 如果有 则遍历数组 找到对应的数组 进行push
              if (!map[ai.trackNumber]) {
                this.stepsData.push({
                  trackNumber: ai.trackNumber,
                  totalVolume: ai.totalVolume,
                  totalWeight: ai.totalWeight,
                  data: [ai]
                });
                map[ai.trackNumber] = ai;
              } else {
                for (let j = 0; j < this.stepsData.length; j++) {
                  let dj = this.stepsData[j];
                  if (dj.trackNumber == ai.trackNumber) {
                    dj.data.push(ai);
                    break;
                  }
                }
              }
            }



            for (let i = 0; i < this.stepsData.length; i++) {
              let data = this.stepsData[i].data
              this.stepsData[i].data.push({
                ...data[data.length - 1],
                status: null,
                originPlaceName: data[data.length - 1].destinationPlaceName
              })
              for (let j = 0; j < this.stepsData[i].data.length; j++) {
                if (this.stepsData[i].data[j].status === 'FINISH') {
                  if (j === this.stepsData[i].data.length - 2) {
                    this.stepsData[i].active = j + 2
                  } else {
                    this.stepsData[i].active = j + 1
                  }

                }
              }
            }

            console.log(this.stepsData)
          }
        })
        this.getLog(into_params.id)
      }
    },
    // 操作日志
    getLog(tmsOrderId) {
      this.$ajax({
        url: "/tms-api/waybill/TmsOrderRpc/selectLogByOrderId.json",
        method: 'post',
        data: { tmsOrderId },
        success: (res) => {
          this.operateLog = res.data.rows
        }
      })
    }
  }
};

</script>
<style lang="less" scoped>
.stepsBox {
  padding: 30px;
}

.stepsDes {
  display: flex;

  >div {
    margin-right: 30px;
    margin-bottom: 30px;
  }
}

.description {
  text-align: center;
  position: relative;

  .transportNumber {
    position: relative;
    transform: translate(0, -60px);
  }
}
</style>
